<template>
  <div class="position_content">
    <div class="content_left">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="版本型号">
          <el-input v-model="formInline.type" placeholder="请输入版本型号" />
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-search" size="mini" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-table
          v-loading="loading"
          :data="tableData"
          size="small"
          :header-cell-style="{background:'#F2F2F2',color:'#333333'}"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            type="index"
            width="50"
          />
          <el-table-column
            prop="version"
            label="版本型号"
            width="85"
          />
          <el-table-column label="经度" width="100" prop="longitude" />
          <el-table-column label="纬度" width="100" prop="latitude" />
          <el-table-column label="速度" width="70" prop="speed" />
          <el-table-column label="方位角" width="70" prop="azimuth" />
          <el-table-column label="操作" width="60px" align="right">
            <template slot-scope="scope">
              <el-button type="text">定位</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :page-size.sync="page.pageSize"
        :total="page.total"
        :current-page.sync="page.pageIndex"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div id="container" class="content_right" />
  </div>
</template>

<script>
import { getPositionList } from '../api'

let map = null

export default {
  name: 'Position',
  data() {
    return {
      formInline: {
        type: ''
      },
      tableData: [],
      page: {
        pageSize: 12,
        pageIndex: 1,
        total: 0
      },
      markers: [],
      infoWindow: null,
      loading: false
    }
  },
  watch: {},
  async created() {
    window.onLoad = async() => {
      // var map = new AMap.Map('container');
      await this.initMap()
      this.addAreaBound()
      this.getDataList()
    }
    var url = 'https://webapi.amap.com/maps?v=1.4.15&key=7f9d602f0390c726dbd6659dbea51b0f&callback=onLoad'
    var jsapi = document.createElement('script')
    jsapi.charset = 'utf-8'
    jsapi.src = url
    document.head.appendChild(jsapi)
  },
  mounted() {
    // this.initMap();
  },
  methods: {
    async initMap() {
      return new Promise((resolve) => {
        map = new AMap.Map('container', {
          resizeEnable: true,
          zoom: 12,
          center: [120.92559, 30.82993]
        })
        resolve()
      })
    },
    // 获取列表信息
    getDataList() {
      const data = {
        version: this.formInline.type,
        page: this.page.pageIndex,
        limit: this.page.pageSize
      }
      this.loading = true
      getPositionList(data).then(res => {
        this.loading = false
        this.tableData = res.data.data.list
        this.page.total = res.data.data.totalRow
        this.tableData.map((item) => {
          var icon = new AMap.Icon({
            // size: new AMap.Size(25, 34),
            image: require('../assets/img/marker.png'),
            // imageSize: new AMap.Size(41, 33),
            anchor: 'center'
          })
          const marker = new AMap.Marker({
            icon: icon,
            position: new AMap.LngLat(item.longitude, item.latitude),
            zIndex: 15
          })
          // marker.on("click", (mapsEvent) => {
          //   that.infoWindow.setContent("<div style='background:#fff;padding:10px;width: 300px;'><div style='border-bottom: 1px solid #dddddd;padding: 10px 0 15px;'><span>陶庄镇XXX社区</span><span style='background: #1182FB;color: #ffff;float: right;'>主要按钮</span></div><ul class='main' ><li style='color:#838A9D;font-size: 14px;padding:5px 0'> 版本型号： <span style='color:#3C4353'>"+item.version+"</span></li>"
          //     + "<li style='color:#838A9D;font-size: 14px;padding:5px 0'>  办理事项: <span style='color:#3C4353'>"+item.version+"  </span></li>"
          //     + "<li style='color:#838A9D;font-size: 14px;padding:5px 0'>  办理人: <span style='color:#3C4353'>"+item.version+"  </span></li>"
          //     + "<li style='color:#838A9D;font-size: 14px;padding:5px 0'>  办理人联系电话 : <span style='color:#3C4353'>"+item.version +"  </span></li></ul></div>");
          //   that.infoWindow.open(that.map, mapsEvent.lnglat);
          // });
          map.add(marker)
          this.markers.push(marker)
        })
        // this.infoWindow = new AMap.InfoWindow({
        //   isCustom:	true,
        //   draggable: true,  //是否可拖动
        //   offset: new AMap.Pixel(0, -31),
        //   content:""
        // });
      })
    },
    onSubmit() {
      this.getDataList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.pageIndex = val
      this.getDataList()
    },
    // 加边界
    addAreaBound() {
      AMap.plugin('AMap.DistrictSearch', () => {
        const districtSearch = new AMap.DistrictSearch({
          extensions: 'all',
          level: 'district'
        })

        districtSearch.search('嘉善县', (status, result) => {
          const bounds = result.districtList[0].boundaries
          //  生成行政区划polygon
          const polygon = new AMap.Polygon({
            map: map,
            strokeWeight: 1,
            strokeColor: 'rgb(0, 155, 255)',
            path: bounds[0],
            fillOpacity: 0.2,
            fillColor: 'rgb(102, 153, 255)',
            zIndex: 5
          })
        })
      })
    },
    // 加点
    // addPoint(lng, lat, content, attribute) {
    //   var icon = new AMap.Icon({
    //     // size: new AMap.Size(25, 34),
    //     image: require('../../assets/img/small.png'),
    //     imageSize: new AMap.Size(41, 33),
    //     anchor: 'center',
    //   });
    //   let marker = new AMap.Marker({
    //     content: content,
    //     icon: icon,
    //     position: new AMap.LngLat(lng, lat),
    //     extData: attribute,
    //     zIndex: 15,
    //   });
    //   marker.on("click", (mapsEvent) => {
    //     this.onPointClick(mapsEvent.target);
    //   });
    //   this.map.add(marker);
    //   this.markers.push(marker);
    // },

    onPointClick(point) {
      console.log(point)
      // this.map.setCenter(point.getPosition());
      var content = `<strong style="color:orange">社区服务站</strong><br/>
                      <ul> 社区服务站名称：</ul>
                      <ul> 地址：</ul>`
      // 设置信息框内容
      // this.infoWindow.setContent(content);
      // 将marker放到指定坐标
      // this.infoWindow.open(this.map, point.lnglat);
      // console.log(content)
      // this.infoWindow = new AMap.InfoWindow({
      //    isCustom: true,  //使用自定义窗体
      //    content: this.createInfoWindow(content),
      //    offset: new AMap.Pixel(12, -30)
      //  })
      this.infoWindow = new AMap.InfoWindow({
        anchor: 'top-left',
        content: content
      })
      this.infoWindow.open(map, point.lnglat)
    }
  }
}
</script>

<style lang="scss" scoped>
 .position_content{
   display: flex;
   flex-direction: row;
   height: calc(100vh - 90px);
   padding: 20px 20px 45px 20px;
   .content_left{
     position: fixed;
     top: 112px;
     right: 28px;
     /*width: 28%;*/
     height: 82%;
     background: #fff;
     padding: 10px;
     z-index: 99;
   }
   .content_right{
     /*border: 1px solid #ccc;*/
     width:100%;
     background: #ccc;
     /*margin-left: 20px;*/
     .main{
       background: #ffffff;
     }
   }

 }
</style>
